<script setup lang="ts">
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useAccountPage } from "./utils/hook";

import Plus from "~icons/ep/plus";
import EditPen from "~icons/ep/edit-pen";
import Delete from "~icons/ep/delete";
import SwitchButton from "~icons/ep/switch-button";
import Lock from "~icons/ep/lock";

defineOptions({ name: "UserAccounts" });

const tableRef = ref();

const {
  filterForm,
  statusOptions,
  roleOptions,
  roleLoading,
  pagination,
  tableData,
  columns,
  loading,
  handleSearch,
  handleResetFilters,
  handlePageChange,
  handleSizeChange,
  dialogVisible,
  dialogTitle,
  dialogForm,
  dialogFormRef,
  dialogRules,
  openCreate,
  openEdit,
  submitForm,
  handleDelete,
  handleToggleStatus,
  handleResetPassword,
  saving
} = useAccountPage();
</script>

<template>
  <div class="accounts-page">
    <el-form
      :inline="true"
      :model="filterForm"
      class="search-form bg-bg_color w-full pl-4 pt-3 pb-2 overflow-auto"
    >
      <el-form-item label="关键词：" prop="keyword">
        <el-input
          v-model="filterForm.keyword"
          placeholder="手机号 / 姓名 / 昵称"
          clearable
          class="w-[220px]!"
        />
      </el-form-item>
      <el-form-item label="角色：" prop="role_id">
        <el-select
          v-model="filterForm.role_id"
          placeholder="全部角色"
          clearable
          class="w-[200px]!"
          :loading="roleLoading"
        >
          <el-option label="全部角色" value="" />
          <el-option
            v-for="role in roleOptions"
            :key="role.id"
            :label="`${role.name}（${role.slug || role.code}）`"
            :value="role.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select
          v-model="filterForm.status"
          placeholder="全部状态"
          clearable
          class="w-[160px]!"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button
          :icon="useRenderIcon('ep:refresh')"
          @click="handleResetFilters"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title="账户管理"
      :columns="columns"
      :tableRef="tableRef"
      @refresh="handleSearch"
      @fullscreen="tableRef.value?.setAdaptive?.()"
    >
      <template #buttons>
        <el-button
          type="primary"
          :icon="useRenderIcon(Plus)"
          @click="openCreate"
        >
          新增用户
        </el-button>
      </template>

      <template #default="{ size, dynamicColumns }">
        <template v-if="loading && tableData.length === 0">
          <el-skeleton :rows="10" animated />
        </template>
        <template v-else>
          <PureTable
            ref="tableRef"
            v-loading="loading"
            row-key="id"
            :columns="dynamicColumns"
            :data="tableData"
            :size="size"
            :pagination="pagination"
            @page-current-change="handlePageChange"
            @page-size-change="handleSizeChange"
          >
            <template #roles="{ row }">
              <el-space wrap>
                <el-tag
                  v-for="role in row.roles ?? []"
                  :key="role.id"
                  size="small"
                >
                  {{ role.name }}
                </el-tag>
                <span v-if="!row.roles || row.roles.length === 0">-</span>
              </el-space>
            </template>
            <template #status="{ row }">
              <el-tag
                :type="row.status === 1 ? 'success' : 'danger'"
                size="small"
                effect="plain"
              >
                {{ row.status === 1 ? "已启用" : "已禁用" }}
              </el-tag>
            </template>
            <template #operation="{ row, size }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :icon="useRenderIcon(EditPen)"
                :size="size"
                @click="openEdit(row)"
              >
                编辑
              </el-button>
              <el-button
                class="reset-margin"
                link
                type="primary"
                :icon="useRenderIcon(SwitchButton)"
                :size="size"
                @click="handleToggleStatus(row)"
              >
                {{ row.status === 1 ? "禁用" : "启用" }}
              </el-button>
              <el-dropdown trigger="click">
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon('ep:more-filled')"
                />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-button
                        class="reset-margin"
                        link
                        type="primary"
                        :icon="useRenderIcon(Lock)"
                        @click="handleResetPassword(row)"
                      >
                        重置密码
                      </el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
                        class="reset-margin"
                        link
                        type="danger"
                        :icon="useRenderIcon(Delete)"
                        @click="handleDelete(row)"
                      >
                        删除
                      </el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </PureTable>
        </template>
      </template>
    </PureTableBar>

    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="520px"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="dialogRules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="dialogForm.phone"
            placeholder="请输入 11 位手机号"
            maxlength="11"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input
            v-model="dialogForm.nickname"
            placeholder="展示名称"
            maxlength="32"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="真实姓名" prop="real_name">
          <el-input
            v-model="dialogForm.real_name"
            placeholder="用于审批、日志追踪"
            maxlength="32"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="dialogForm.email"
            placeholder="可选，用于通知"
            maxlength="64"
            show-word-limit
            clearable
          />
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input
            v-model="dialogForm.password"
            type="password"
            show-password
            :placeholder="
              dialogForm.id === 0 ? '必须设置密码' : '留空表示不修改'
            "
            maxlength="32"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="dialogForm.status"
            :inactive-value="0"
            :active-value="1"
          />
        </el-form-item>
        <el-form-item label="角色" prop="role_ids">
          <el-select
            v-model="dialogForm.role_ids"
            multiple
            collapse-tags
            collapse-tags-tooltip
            placeholder="请选择角色"
            :loading="roleLoading"
          >
            <el-option
              v-for="role in roleOptions"
              :key="role.id"
              :label="`${role.name}（${role.slug || role.code}）`"
              :value="role.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="saving" @click="submitForm">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.accounts-page {
  padding: 12px 12px 20px;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 12px;
}

.search-form :deep(.el-form-item__label) {
  padding-right: 6px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>
